import {
  Component,
  Host,
  Input,
  Optional,
} from '@angular/core';
import { Flower } from '../flower';

@Component({
  selector: 'app-c-render',
  standalone: true,
  template: `
    <div
      class="p-2 m-2 border-2 border-blue-400 border-dashed w-96"
    >
      <span class="bg-amber-200">
        C (<code>&#64;Host</code>) - [{{ prefix }}]:
        {{ flower?.name }}
      </span>
    </div>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 border-2 border-blue-600 rounded;
      width: 26rem;
    }
  `,
})
export class CRenderComponent {
  @Input({ required: true }) prefix!: string;

  constructor(
    @Host()
    @Optional()
    public flower: Flower | null
  ) {}
}
